<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
    <link rel="stylesheet"type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/headSearch.css" />
</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">购物车</h1>
        <a class="mui-icon mui-icon-trash mui-pull-right"id="btnDelete" href="#"></a>
    </header>
    <div class="mui-content mui-scroll-wrapper"id="refreshContainer">
    	<div class="mui-bar mui-table-view-cell"style="position: fixed;bottom: 1px;vertical-align: middle;">
    		合计:<span style="color: red;">￥<span id="total">0</span></span>
    		<button id="payorder" class="mui-btn mui-btn-negative"style="background-color: #fe6465;">
    			生成订单
    		</button>
    	</div>
    	<ul class="mui-table-view"id="cartList"style="margin-bottom: 40px;">
    		<li class="mui-table-view-cell">
    			<div class="mui-checkbox mui-left">
    				<input name="checkbox"id="" type="checkbox" style="left: 5px;top: 25px;" />
    				<img class="mui-media-object mui-pull-left"style="margin-left: 45px;max-width: 80px;width: 80px;height: 80px;"src="images/timg15.jpg" />
    				<div class="mui-media-body">
    					<p class="mui-ellipsis">
    						<div style="color: red;">
    							<span class="price">青椒肉丝</span>
    						</div>
    					</p>
    				</div>
    			</div>
    			<div class="mui-numbox">
    				<button class="mui-btn mui-numbox-btn-minus"type="button">-</button>
    				<input class="mui-numbox-input"type="number"value="" />
    				<button class="mui-btn mui-numbox-btn-plus"type="button">+</button>
    			</div>
    		</li>
    		<li class="mui-table-view-cell">
    			<div class="mui-checkbox mui-left">
    				<input name="checkbox"id="" type="checkbox" style="left: 5px;top: 25px;" />
    				<img class="mui-media-object mui-pull-left"style="margin-left: 45px;max-width: 80px;width: 80px;height: 80px;"src="images/timg26.jpg" />
    				<div class="mui-media-body">
    					<p class="mui-ellipsis">
    						<div style="color: red;">
    							<span class="price">回锅肉盖饭</span>
    						</div>
    					</p>
    				</div>
    			</div>
    			<div class="mui-numbox">
    				<button class="mui-btn mui-numbox-btn-minus"type="button">-</button>
    				<input class="mui-numbox-input"type="number"value="" />
    				<button class="mui-btn mui-numbox-btn-plus"type="button">+</button>
    			</div>
    		</li>
    	</ul>
    	
    </div>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    mui.init({
    	swipeBack:true//开启右滑关闭功能
    });
    $("#payorder").bind("tap", function() {
					mui.openWindow({
						url: "payorder.html",
						id: "payorder",
						show: {
							duration: 300
						}
					});
				});
    </script>
</body>
</html>
